<template>
  <view class="bargain_container" :style="half?'width: 345rpx':'width: 702rpx'"
    :class="half?'half':mallId==='100'?'whole_dark':'whole'" v-if="goodsList.length">
    <view class="floor_bargain_title">
      <image :src="staticUrl()+'/new/floor_bargain_more.png'" class="more" @click="clickJumpInfo">
      </image>
    </view>
    <!-- 数据 -->
    <swiper :interval="3000" autoplay circular class="swiper">
      <swiper-item v-for="(item, index) in goodsList" :key="index" class="swiper-item"
        :class="half?'half2':'half4'">
        <view v-for="(i, ins) in item" :key="ins" @click="clickJumpInfo" class="item">
          <image v-if="i.inform" mode="aspectFit" :src="i.inform" class="img inform_announcement">
          </image>
          <ImageCache class="img" :class="i.quantity ? '' : 'sellOut_container-img'"
            :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"
            :mode="'aspectFit'" />
          <view class="goodsName">
            <span class="ephedrine" v-if="i.ephedrine">含特</span>
            <span class="goods_name singleRowEllipsis"> {{ i.goodsName }} </span>
          </view>
          <!-- <text class="goodsName singleRowEllipsis">{{ i.goodsName }}  </text>
            <view v-if="i.promotionMethods.length">
            <span class="ephedrine" v-if="i.ephedrine">含麻</span>
            <text v-for="(n, m) in i.promotionMethods" :key="m"
              :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
              {{ n.promotionType === 'COUPON' ? '券' : n.name }}
            </text>
          </view> -->
          <view v-if="hasToken() && i.promotionPrice">
            <view class="promotionPrice">
              <text class="coinSymbol">￥</text>
              <text class="price" v-if="i.promotionPrice">{{ i.promotionPrice }}</text>
              <text class="packing">/{{ i.goodsUnit }}</text>
            </view>
          </view>
          <view class="prices singleRowEllipsis" v-if="hasToken() && !i.promotionPrice">
            <text class="login_see">资质审核可见</text>
          </view>
          <view class="prices" v-if="!hasToken()">
            <text class="login_see">登录可见</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { activityData } from '@/api/home/index'

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    half: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      mallId: '0',
      goodsList: [],
    }
  },
  created () {
    this.mallId = uni.getStorageSync('mallId') || "0"
    this.getList()
  },
  methods: {
    // 跳转 详情
    clickJumpInfo (val) {
      uni.navigateTo({
        url: `/subpackage/activity/activity?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    },
    // 获取数据 组装数组
    getList () {
      activityData({
        path: this.data.promotion.promotionGoodsPath,
        params: { pageNumber: 1, pageSize: 8 }
      }).then(res => {
        let goods = res.data.records
        if (res.code === 200) {
          let a = this.half ? 2 : 4
          let num = Math.ceil(goods.length / a)
          for (let i = 0; i < num; i++) {
            this.$set(this.goodsList, i, goods.slice(i * a, i * a + a))
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.half {
  width: 345rpx;
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_bargain.png");
}
.whole {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_bargain1.png");
}
.whole_dark {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_bargain2.png");
}
.bargain_container {
  background-size: 100%;
  background-repeat: no-repeat;
  height: 253rpx;
  .floor_bargain_title {
    position: relative;
    .more {
      width: 79rpx;
      height: 44rpx;
      position: absolute;
      top: 14rpx;
      right: 0;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .swiper {
    height: 175rpx;
    margin: 0 18rpx;
    padding-top: 62rpx;
    .swiper-item {
      display: grid;
      gap: 16rpx;
      .item {
        width: 155rpx;
        height: 175rpx;
        background: #ffffff;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        display: flex;
        flex-flow: column nowrap;
        .img {
          width: 95rpx;
          height: 76rpx;
          margin: 16rpx auto 0;
        }
        .goodsName {
          margin: 0 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .goods_name {
            font-size: 20rpx;
          }
        }
        .promotionPrice {
          color: #ef231b;
          text-align: center;
          .coinSymbol {
            font-size: 20rpx;
          }
          .price {
            font-size: 26rpx;
            font-weight: bold;
          }
          .packing {
            font-size: 18rpx;
            color: #999999;
          }
        }
        .prices {
          text-align: center;
          .login_see {
            font-size: 24rpx;
            color: #ef231b;
          }
        }
      }
    }
    .half2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .half4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}
</style>
